<template>
  <div class="top-container">
    <div class="weather-info">
      <router-link to="/" class="weather-link">
        <span class="iconfont icon-taiyang"></span>
        <div>新中地天气</div>
      </router-link>

      <div class="word-city">{{ cityName }}</div>
      <!-- 显示城市名称 -->
      <div class="word-weather">
        实时天气: {{ currentWeather.dayweather }} {{ currentWeather.daytemp }}℃
        {{ currentWeather.daywind }}风 {{ currentWeather.daypower }}级
      </div>
    </div>

    <div class="right-container">
      <!-- 最右侧的span，点击时弹出模态框 -->
      <span class="iconfont icon-xiangqing" @click="openModal"></span>
      <!-- 这里是插槽的位置 -->
      <slot></slot>
    </div>
  </div>

  <!-- 模态框 -->
  <div v-if="isModalVisible" class="modal">
    <div class="modal-content">
      <h3>关于:</h3>
      <p>这个应用可以用来追踪你选择城市的当前天气</p>
      <br />
      <h3>如何使用:</h3>
      <p>1.点击搜索框输入你希望追踪的城市</p>
      <p>2.在搜索结果中选中一个城市，你将获取当地最新的天气</p>
      <p>3.点击右侧的＋号可以将追踪城市的天气情况保存在首页</p>
      <br />
      <h3>移除城市:</h3>
      <p>如果你不想在首页关注某个城市,可以通过底部的按钮删除它</p>
      <br />
      <button @click="closeModal">关闭</button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
import "../icon/iconfont.css";
// 提取路由实例
const router = useRouter();

// 定义 props，用于接收父组件传递的数据
const props = defineProps({
  localCityData: {
    type: Object,
    required: true,
  },
});

// 声明响应式变量来存储城市和天气信息
const cityName = ref("");
const currentWeather = ref({
  dayweather: "",
  daytemp: "",
  daywind: "",
  daypower: "",
});

// 声明模态框显示状态
const isModalVisible = ref(false);

// 打开模态框
const openModal = () => {
  isModalVisible.value = true;
};

// 关闭模态框
const closeModal = () => {
  isModalVisible.value = false;
};

watch(
  () => props.localCityData,
  (newValue) => {
    if (newValue.forecasts && newValue.forecasts.length > 0) {
      const casts = newValue.forecasts[0].casts;
      cityName.value = newValue.forecasts[0].city; // 提取城市名称
      if (casts.length > 0) {
        currentWeather.value = {
          dayweather: casts[0].dayweather, // 天气情况
          daytemp: casts[0].daytemp, // 白天气温
          daywind: casts[0].daywind, // 风向
          daypower: casts[0].daypower, // 风力
        };
      }
    }
  },
  { immediate: true }
); // immediate 确保首次加载时也会触发
</script>

<style lang="scss" scoped>
.top-container {
  position: relative;
  display: flex;
  padding: 10px 10%;
  height: 80px;
  background-color: #00668a;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  color: white;
  z-index: 100;

  .weather-info {
    display: flex;
    gap: 15px;

    .weather-link {
      display: flex;
      cursor: pointer;
      gap: 10px;
      text-decoration: none; /* 去掉下划线 */
      color: inherit; /* 继承父元素的字体颜色 */
      font-size: 28px; /* 设置字体大小 */
      align-items: center;
    }

    .word-city {
      font-size: 20px; /* 设置城市字体大小 */
      align-content: center;
    }

    .word-weather {
      font-size: 14px; /* 设置天气字体大小 */
      align-content: center;
    }
  }
  .right-container {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .icon-xiangqing {
    padding: 5px;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    color: #00668a;
    margin-left: 20px;
    background-color: white;
  }
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 200;
}

.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.modal-content button {
  background-color: #00668a;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.modal-content button:hover {
  background-color: #004e6b;
}
</style>
